<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./turnpage/index.css">
    <link rel="icon" href="./images/logo.ico">
</head>
<body>
    <!-- 
        学生管理系统：
                （1） 用原生js 和基础的html  css
                （2） jquery: 用jquery实现
                           京东首屏
        网络： 
            瀑布流
            聊天机器人
        循环迭代项目： 
            一个项目不断地迭代
        
        第一次项目课程内容：
        （1） 把结构样式写出来
        （2） 写一些功能性的代码
        （3） 完成所有功能  （有时间的话 做一些优化效果）
     -->
     <div class="header">
         <div class="logo">
             <img src="./images/logo.png" alt="渡一教育">
             <span>渡一教育</span>
         </div>
     </div>
     <div class="menu">
         <dl class="menu-list">
             <dt>学生管理</dt>
             <dd class="active" data-id="student-list">学生列表</dd>
             <dd data-id="student-add">新增学生</dd>
         </dl>
     </div>
     <div class="content">
        <div id="student-add" >
            <form id="student-add-form" >
                <div><label for="name">姓名</label><input id="name" name="name" type="text"></div>
                <div><label for="sex">性别</label><input type="radio" name="sex" id="male" value="0" checked>
                    <label for="male" class="sex" >男</label><input type="radio" name="sex" value="1" id="female">
                    <label for="female" class="sex">女</label>
                </div>
                <div><label for="email">邮箱</label><input type="text" name="email" id="email"></div>
                <div><label for="number">学号</label><input type="text" id="number" name="sNo"></div>
                <div><label for="birth">出生年</label><input type="text" id="birth" name="birth"></div>
                <div><label for="phone">手机号</label><input type="text" id="phone" name="phone"></div>
                <div><label for="address">住址</label><input type="text" id="address" name="address"></div>
                <div><label for=""></label>
                
                    <input type="submit" id="student-add-btn" class="btn" value="提交">
                    <input type="reset" class="btn" value="重置">
                </div>
            </form>
        </div>
        <div id="student-list">
            <div class="search">
                <label for="search-inp">关键字查询：</label>
                <input type="text" id="search-inp">
                <button id="search-btn">搜索</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th width="100" >学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>年龄</th>
                        <th>手机号</th>
                        <th>住址</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>0001</td>
                        <td>塔器</td>
                        <td>女</td>
                        <td>11111@qq.com</td>
                        <td>18</td>
                        <td>13232323232</td>
                        <td>哈尔滨</td>
                        <td>
                            <button class="btn edit">编辑</button>
                            <button class="btn delete">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div id="page"></div>
            <div class="modal">
                <div class="mask"></div>
                <div class="modal-content">
                    <h3>编辑表单</h3>
                    <form id="studnet-edit-form" >
                        <div><label for="edit-name">姓名</label><input id="edit-name" type="text" name="name"></div>
                        <div><label for="sex">性别</label><input type="radio" name="sex" id="edit-male" value="0" checked>
                            <label for="edit-male" class="sex" >男</label><input type="radio" name="sex" value="1" id="edit-female">
                            <label for="edit-female" class="sex">女</label>
                        </div>
                        <div><label for="edit-email">邮箱</label><input name="email" type="text" id="edit-email"></div>
                        <div><label for="edit-number">学号</label><input name="sNo" readonly type="text" id="edit-number"></div>
                        <div><label for="edit-birth">出生年</label><input name="birth" type="text" id="edit-birth"></div>
                        <div><label for="edit-phone">手机号</label><input name="phone" type="text" id="edit-phone"></div>
                        <div><label for="edit-address">住址</label><input type="text" name="address" id="edit-address"></div>
                        <div><label for=""></label>
                            <input type="submit" id="student-edit-btn" class="btn" value="提交">
                        </div>
                    </form>
                </div>
            </div>
        </div>
     </div>
     <script src="./jquery-3.3.1.js"></script>
     <script src="./turnpage/index.js"></script>
     <script src="./jqIndex.js"></script>
</body>
</html>